import React, { useEffect, useState,useContext } from 'react'
import './mine.css'
import Header from '../../components/header/Header'
import img1 from '../../assets/img/tou_02.jpg'
import img2 from '../../assets/img/red_envelopes.png'
import img3 from '../../assets/img/payment.png'
import img4 from '../../assets/img/pic8.png'
import   {ReducerContext} from  '../../App'
import { Carousel } from "antd-mobile";
import { reqgetbanner } from '../../request/api'

export default function Mine(props) {
    const [banner, getbanner] = useState([])
    const { state } = useContext(ReducerContext);
    useEffect(() => {
        reqgetbanner().then(res => {
            getbanner(res.data.list)
        })
    }, [])
    return (
        <div className='Mine'>
            <Header title='我的'> </Header>
            <div className="head clearfix">
                <div className="left fl">
                    <img src={img1} alt="" className='fl' />
                    <div className="fl">
                        <h2>{state.info.nickname}</h2>
                        <i>完善资料让小u更懂你</i>
                    </div>
                </div>
                <div className="right fr">
                    <img src={img2} alt="" />
                    <i>每日签到</i>
                </div>
            </div>
            <div className="nav">
                <ul className="top">
                    <li><i>12</i></li>
                    <li><i>12</i></li>
                    <li><i>&yen;0</i></li>
                    <li><i>12</i></li>
                </ul>
                <ul className="bottom">
                    <li><i>我的收藏</i></li>
                    <li><i>浏览记录</i></li>
                    <li><i>我的红包</i></li>
                    <li><i onClick={() =>props.history.push('/youhui')}>优惠券</i></li>
                </ul>

                <div className="cen">
                    <div className="top">
                        <h3>我的订单</h3>
                        < i>全部订单<em className="iconfont">&#xe63c;
                        </em></i>
                    </div>
                    <div className="bott">
                        <i>
                            <img src={img3} alt="" />
                            <p>待付款</p>
                        </i>
                        <i>
                            {/* <img src="./images/delivery.png" alt="pic"> */}
                            <img src={img3} alt="" />
                            <p>待收货</p>
                        </i>
                        <i>
                            {/* <img src="./images/evaluation.png" alt="pic"> */}
                            <img src={img3} alt="" />
                            <p>评价</p>
                        </i>
                        <i>
                            {/* <img src="./images/service.png" alt="pic"> */}
                            <img src={img3} alt="" />
                            <p>售后/退款</p>
                        </i>
                    </div>

                </div>


            </div>
            <div className="lunbotu">
                <Carousel autoplay={true} infinite>
                    {banner.map((item) => (
                        <img
                            key={item.id}
                            src={item.img}
                            alt=""
                            style={{ width: "100%", verticalAlign: "top", height: "86px" }}
                        />
                    ))}
                </Carousel>
            </div>
            <div className="content-box">
                        <div className="box">
                            <img src={img4} alt="" />
                            <p>地址管理</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>我的钱包</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>我的二维码</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>我的小伙伴</p>
                        </div>
                        <div className="box">
                        <img src={img4} alt="" />
                            <p>0元适用</p>
                        </div>
                    </div>
        </div>
    )
}
